<div class="app-image-slider" [ngStyle]="{'height':sliderImageHeight+'px'}">
  <div class="app-image-slider-container">
    <div class="main"
      [ngStyle]="{'height':sliderImageHeight+'px'}"
      #sliderMain>
      <div *ngIf="imageObj.length"
        class="main-inner"
        [ngClass]="{'with-ng-main-pagination': paginationShow}"
        [ngStyle]="{'margin-left':leftPos+'px', 'width':imageParentDivWidth+'px', 'transition': effectStyle}"
        (touchstart)="swipe($event, 'start')"
        (touchend)="swipe($event, 'end')">
        <div *ngFor="let img of imageObj; let i = index"
          [ngClass]="{'image-popup': imagePopup, 'selected-image': activeImageIndex == i}"
          [ngStyle]="{'width':sliderImageWidth+'px', 'margin-left':imageMargin+'px', 'margin-right':imageMargin+'px'}"
          class="img-div"
          (click)="imageOnClick(img.index)"
          (mouseenter)="stopSlideOnHover && imageMouseEnterHandler()"
          (mouseleave)="stopSlideOnHover && imageAutoSlide()"
          #imageDiv>
          <custom-img [imageUrl]="img?.thumbImage"></custom-img>
        </div>
      </div>
      <a *ngIf="showArrowButton && imageObj.length > 1"
        class="prev icons prev-icon"
        (click)="prev()"
        (mouseenter)="stopSlideOnHover && imageMouseEnterHandler()"
        (mouseleave)="stopSlideOnHover && imageAutoSlide()">&lsaquo;</a>
      <a *ngIf="showArrowButton && imageObj.length > 1"
        class="next icons next-icon"
        (click)="next()"
        (mouseenter)="imageMouseEnterHandler()"
        (mouseleave)="imageAutoSlide()">&rsaquo;</a>
    </div>
  </div>
</div>